<template>
	<view class="driver-box" v-if="isDriver">
		<view class="select-driver">
			<view class="title">
				请选择司机
			</view>
			<scroll-view scroll-y="true" class="driver-scroll">
				<view class="driver">
					<!-- active -->
					<view :class="'list '+(index==check?'active':'') " @tap="active(index,item)" v-for="(item,index) in driverList" :key="index">
						{{item}}
					</view>
				
				</view>
			</scroll-view>
			
			
			<view class="btn-group">
				<view class="btn qx" @tap="driverQx">
					取消
				</view>
				<view class="btn qr" @tap="driverQr">
					确认
				</view>
			</view>
		</view> 
	</view>
</template>

<script>
	export default {
		props:{
			isDriver:false
	　　},//用props属性进行传数据，此时子组件已经获取到list的数据了
		data() {
			return {
				driverList:['司机A','司机B','司机C','司机D','司机E','司机F'],
				check:0,
				driverName:'',
			}
		},
		
		methods: {
			driverQx(){
				this.$emit('driver-qx', false)  //这样this.isDriver就会被修改；

			},
			driverQr(){
				
				this.$emit('driver-qr', this.driverName)
				this.$emit('driver-qx', false)  //这样this.isDriver就会被修改；
			},
			active(index,item){
				console.log(index)
				this.check = index;
				this.driverName = item
			}
		}
	}
</script>

<style>
	@import url("./selectDriver.css");
</style>
